<template>
  <!-- 评级分布 -->
  <div>
    <div>
      <polylineColumnBlendEcharts ref="polylineColumnBlendEcharts" :option-data="echartsData" />
    </div>
  </div>
</template>

<script>
import polylineColumnBlendEcharts from '@/views/bond/bondPositionInformation/polylineColumnBlendEcharts.vue'
export default {
  components: {
    polylineColumnBlendEcharts
  },
  props: {
    echartsDataParent: {
      type: Object,
      default: () => undefined
    }
  },
  data() {
    return {
      showEcharts: false,
      echartsData: undefined
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.echartsData = {
        titleZ: this.$t('金额'),
        titleX: this.$t('数量'),
        dataZ: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
        dataX: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
        optionsArr: ['AAA+', 'AAA', 'AAA-', 'AA+', 'AA', 'AA-', 'BBB+', 'BBB', 'BBB-', 'BB+', 'BB', 'BB-', 'B+', 'B', 'B-', 'CCC'],
        leftName: this.$t('债券余额(万元)'),
        rightName: this.$t('债券数量')
      }
      console.log('2222222222222222222')
      if (this.echartsDataParent !== undefined) {
        this.echartsData = this.echartsDataParent
      }
      this.showEcharts = true
    }
  }
}
</script>

<style scoped>

</style>
